<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div class="consult-list-item" v-for="(item, index) in list" :key="index">
      <consultItem @on-delete="onDelete" :item="item"></consultItem>
    </div>
  </van-list>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import consultItem from "./consultItem.vue";
import { getOrderListApi } from "@/services/consult";
import type { ConsultOrderItem } from "@/types/consult";
const data = reactive({
  pageSize: 5,
  current: 1,
});

const list = ref<ConsultOrderItem[]>([]);
const loading = ref(false);
const finished = ref(false);
const onLoad = async () => {
  loading.value = true;
  if (list.value.length === 0) {
    data.current = 1;
  } else data.current++;
  const res = await getOrderListApi(data.current, data.pageSize, props.type);
  let newlist = res.data.rows;
  if (newlist.length === 0) {
    finished.value = true;
  } else {
    list.value = [...list.value, ...newlist];
  }
  loading.value = false;
};

const props = defineProps<{ type: number }>();

// 删除订单
const onDelete = (id: string) => {
  list.value = list.value.filter((item) => item.id !== id);
  // 如果删除订单后没有数据了
  if (!list.value.length) onLoad();
};
</script>

<style lang="scss" scoped>
.over {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
    > p {
      color: var(--cp-text3);
    }
  }
}
.van-list {
  height: calc(100vh - 92px);
  overflow-y: scroll;
  background-color: #f6f7f9;
  padding: 10px;
}
.consult-list-item {
  margin: 10px 0;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  .top {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--cp-line);
    .style {
      color: orange;
    }
    img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
    .left {
      display: flex;
      align-items: center;
    }
    > p {
      color: var(--cp-text3);
    }
  }
  .desc {
    p {
      margin: 8px 0;
      display: flex;
      align-items: center;
      span:nth-child(1) {
        display: block;
        width: 70px;
        text-align: left;
        color: var(--cp-dark);
      }
    }
    p:last-child {
      span:last-child {
        color: var(--cp-dark);
      }
    }
  }
  .btn {
    text-align: right;
    .van-button:nth-child(1) {
      background-color: var(--cp-bg);
      color: var(--cp-text3);
      border: 0;
      margin-right: 10px;
    }
    .van-button:nth-child(2) {
      background-color: transparent;
      color: var(--cp-primary);
    }
  }
}
</style>
